import React from 'react'
import { useEffect } from 'react'
import axios from 'axios';
import { useState } from 'react';
import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';

export default function HeroDetail() {
  //状态
  let [hero, setHero] = useState({});
  //获取 url 中的 params id 参数
  // let {id} = useParams();
  //获取 url 中的 query id 参数
  // let [search] = useSearchParams();
  // let id = search.get('id');
  //获取 state 中的 id 参数
  let {state: {id}} = useLocation();
  
  //发送请求
  useEffect(() => {
    let getHero = async () => {
      //发送请求
      let result = await axios.get(`https://api.xiaohigh.com/heros/${id}`);
      //更新状态
      setHero(result.data);
    }
    getHero();
  }, [id]);
  //获取 navigate 函数
  let navigate = useNavigate();

  return (
    <div className="hero-detail container" style={{paddingTop: 30}}>
      {/* 左边 */}
      <div className="col-xs-3">
        <div style={{background: '#eee', overflow: 'hidden', padding: '20px 10px 20px'}}>
          <button className="btn btn-primary" onClick={() => {
            navigate(-1);
          }}>返回</button>
          <Link to="/hero" state={{id: 19}} >上官婉儿</Link>
          <h3>{hero.name}</h3>
          <p>{hero.type}</p>
          <div className="row">
            {
              hero.skills && hero.skills.map((item, index) => {
                return <div className="col-xs-3" key={index}>
                        <img width="100%" src={"http://cdn.xiaohigh.com" + item.img} alt="" />
                        <p>{item.name}</p>
                      </div>
              })
            }
          </div>
        </div>
      </div>

      {/* 右边 */}
      <div className="col-xs-9">
        <div><img width="100%" src={hero.big_image ? ("http://cdn.xiaohigh.com" + hero.big_image) : ''} alt="" /></div>        

        <p style={{paddingTop: 30}} dangerouslySetInnerHTML={{__html: hero.intro}}>
        </p>
      </div>
    </div>
  )
}
